    <template>
        <van-tabbar route v-model="active" active-color="#1D91FF" fixed inactive-color="#868D9A" safe-area-inset-bottom
            class="bgFooter" style="background-color: #121212 !important;">
            <van-tabbar-item name="home" to="/home">
                <span>{{ $t('首页') }}</span>
                <template #icon="props">
                    <img :src="props.active ? home.active : home.inactive" alt="home" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item name="quotes" :to="{ name: 'Quotes', query: { active: 2 } }">
                <span>{{ $t('市场') }}</span>
                <template #icon="props">
                    <img :src="props.active ? qoutes.active : qoutes.inactive" alt="Quotes" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item name="/trade/btc">
                <template #icon="props">
                    <div class="wrapper">
                        <img v-if="!show" :src="props.active ? trade.active : trade.inactive" alt="trade" class="trade"
                            style="width: 46px; height: 46px;" @click="handleTradeClick" :style="{transform: active === '/trade/btc' ? 'rotate(90deg)' : 'rotate(0deg)'}"/>
                        <div v-else @click="show = false"><van-icon name="cross" /></div>
                        <span style="font-size: 12px !important;">{{ $t('交易') }}</span>
                    </div>
                </template>
            </van-tabbar-item>
            <van-tabbar-item name="contract/btc"
                :to="{ name: 'Contract', params: { symbol: getStorage('symbol') || 'btc' } }">
                <span>{{ $t('合约') }}</span>
                <template #icon="props">
                    <img :src="props.active ? contract.active : contract.inactive" alt="perpetualContract" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item name="funds" to="/funds">
                <span>{{ $t('资金') }}</span>
                <template #icon="props">
                    <img :src="props.active ? funds.active : funds.inactive" alt="funds" />
                </template>
            </van-tabbar-item>

            <van-popup v-model="show">
                <div class="van-popup-content">
                    <div v-for="(item, index) in tradeOptions" :key="index" :class="active === index && 'active'"
                        @click="active = index">
                        <div>
                            <img :src="item.icon" :alt="item.text">
                            {{ item.text }}
                        </div>
                    </div>
                </div>
            </van-popup>
        </van-tabbar>
    </template>

<script>
import { mapGetters } from 'vuex';
import { getStorage } from '@/utils/utis'
import { Popup } from "vant";
export default {
    props: {
        isActive: {
            type: Boolean,
            default: true
        },
    },
    components: {
        [Popup.name]: Popup,
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        }),
    },
    data() {
        return {
            getStorage,
            active: 'home',
            home: {
            },
            qoutes: {

            },
            trade: {

            },
            contract: {

            },
            funds: {

            },
            show: false,
            active: -1,
            tradeOptions: [
                { text: '闪兑', icon: require('@/assets/image/Group 7771.png') },
                { text: '现货', icon: require('@/assets/image/Group 7771 (1).png') },
                { text: '合约', icon: require('@/assets/image/Group 7771 (2).png') },
                { text: '盘前交易', icon: require('@/assets/image/Group 7771 (3).png') },
                { text: '期权', icon: require('@/assets/image/Group 7771 (4).png') }
            ]
        }
    },
    mounted() {
        this.home = {
            active: require(`../../assets/theme/${this.theme}/image/footer/home1.png`),
            inactive: require(`../../assets/theme/${this.theme}/image/footer/home2.png`),
        }
        this.qoutes = {
            active: require(`../../assets/theme/${this.theme}/image/footer/quotes1.png`),
            inactive: require(`../../assets/theme/${this.theme}/image/footer/quotes2.png`),
        }
        this.trade = {
            active: require(`../../assets/theme/${this.theme}/image/footer/trade.png`),
            inactive: require(`../../assets/theme/${this.theme}/image/footer/trade.png`),
        }
        this.contract = {
            active: require(`../../assets/theme/${this.theme}/image/footer/contract1.png`),
            inactive: require(`../../assets/theme/${this.theme}/image/footer/contract2.png`),
        }
        this.funds = {
            active: require(`../../assets/theme/${this.theme}/image/footer/funds1.png`),
            inactive: require(`../../assets/theme/${this.theme}/image/footer/funds2.png`),
        }
    },
    methods: {
        handleTradeClick() {
            if (this.$route.name === 'Trade') {
                this.show = true
                return
            }
            this.$router.push({ name: 'Trade', params: { symbol: getStorage('tradeSymbol') || 'btc' } })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../assets/init.scss";


.van-tabbar--fixed {
    z-index: 10;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.van-tabbar {
    height: 108px;
    font-size: 22px;
}

.van-tabbar-item__icon img {
    height: 56px;
    width: 56px;
}

::v-deep .van-tabbar-item__icon {
    margin-bottom: 9px;
}

::v-deep .van-tabbar-item__text {
    text-align: center;
}

.bgFooter {
    ::v-deep .van-tabbar-item--active {
        background-color: #121212 !important;

        @include themify() {
            background: themed("footer_background");
        }
    }

    ::v-deep .van-tabbar-item--active {
        background-color: #121212 !important;

        @include themify() {
            color: #fff !important;
        }
    }
}

.bg-night {
    ::v-deep .van-tabbar-item--active {
        background: $night;
    }
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateY(-10%);
    z-index: 10000000;

    &>div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #121212;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 36px;
    }
}

/deep/ .trade {
    transition: all .3s;

    span {
        font-size: 0.2rem !important;
    }
}

/deep/ .van-tabbar-item--active {
    .trade {
        transform: rotate(180deg) !important;
    }
}

::v-deep .van-overlay {
    height: 80%;
}

::v-deep .van-popup {
    width: 92% !important;
    top: 77.3%;
    background: #121212 !important;
    border-radius: 40px;

    .van-popup-content {
        padding: 40px 30px;
        padding-bottom: 60px;
        background: #121212;
        color: #fff;
        display: grid;
        gap: 20px;
        position: relative;
        overflow: hidden;

        &::after {
            content: "";
            position: absolute;
            background-color: #000000;
            width: 200px;
            height: 180px;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 80%);
            border-radius: 50%;
        }


        & div {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 28px;
        }

        &>div {
            padding: 10px 20px;
            border-radius: 10px;
        }

        .active {
            background-color: #191919;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
                background: url("@/assets/image/Group 7764.png") no-repeat center center;
                width: 40px;
                height: 40px;
            }
        }
    }
}
</style>
